@import url('./_environment.pcss');

@layer firstLevel {
  #hero {
    h1 {
      min-height: 4em;
    }

    @media (width <= 1440px) {
      height: calc(100vh - var(--header-height));
      min-height: 500px;
    }
  }

  .BlockWithTwoColumns {
    display: grid;
    grid-template:
      'left right' auto
      / 1.2fr 0.8fr;
    gap: clamp(40px, pxToVw(90, $layoutWidth), 90px);

    first-block {
      grid-area: left;
    }

    second-block {
      grid-area: right;
    }

    &._reverse {
      grid-template:
        'right left' auto
        / 1fr 1fr;
    }
  }

  .Header {
    position: relative;
    height: var(--header-height);
    background: var(--third-coffee);
  }

  .Footer {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(350px, 0.5fr);
    background: var(--black-coffee);

    @media (1024px < width <= 1440px) {
      grid-template:
        'left right-top' auto
        'bottom bottom' auto
        / 1fr 1.8fr;

      ._left_area {
        grid-area: left;
      }

      ._right_top_area {
        grid-area: right-top;
      }

      ._bottom_area {
        grid-area: bottom;
      }
    }

    @media (width <= 1024px) {
      grid-auto-columns: 1fr;
      grid-template: none;
      grid-template-rows: auto auto auto;
      gap: 100px;
    }
  }

  main {
  }

  emerge-menu {
    position: relative;
    display: inline-block;
    width: fit-content;

    > button {
    }

    > dialog {
      position: absolute;
      z-index: 1;
      top: 100%;

      display: block;

      width: max-content;

      background: white;

      transition: all 0.2s ease;

      &:not([open]) {
        pointer-events: none;
        opacity: 0;
      }

      &.toLeft {
        right: 0;
      }

      &.toRight {
        left: 0;
      }

      &.toCenter {
        left: 50%;
        translate: -50% 0;
      }
    }
  }

  spoiler-wrapper {
    /* ? Example of usage. Don't forget to connect the dialogs scripts.
    <spoiler-wrapper>
      <button type='button'
              data-toggle-dialog-id='spoiler'>
        Open the spoiler
      </button>

      <c-content>
        <dialog id='spoiler'>
          content
        </dialog>
      </c-content>
    </spoiler-wrapper>
    */

    > c-content {
      display: grid;

      /* You can "ajar" a content element by setting a value between 0 and 1 fr. */
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease;

      dialog {
        overflow: hidden;
        opacity: 1;

        &:not([open]) {
          pointer-events: none;
        }

        &[open] {
          pointer-events: all;
        }
      }
    }

    > button {
      &[aria-expanded='true'] {
        ~ .content {
          grid-template-rows: 1fr;
        }
      }
    }
  }

  .NavMenu {
    --links-inline-padding: clamp(20px, pxToVw(37, $layoutWidth), 37px);

    height: 100%;

    ul {
      height: 100%;

      li {
        a,
        button {
          &:hover,
          &:focus {
          }
        }
      }

      @media (width > 1440px) {
        margin-inline: calc(-1 * var(--links-inline-padding));
      }
    }
  }

  button[data-open-dialog-id='burger-menu'] {
    @media (--burger-menu-is-hidden) {
      display: none;
    }
  }

  /*
    ? This is the basic properties and animations of the burger button.
    If you find that a part of the <rect> extends beyond the boundaries of the <svg>, try to make the <svg> a square (width and height must be equal).
  */
  button.AnimatedSvgBurger {
    svg {
      > rect {
        transform-origin: center;
        transform-box: fill-box;
        transition: all 0.3s ease;

        &:nth-child(1) {
          width: 100%;
        }

        &:nth-child(2) {
          width: 100%;
        }

        &:nth-child(3) {
          width: 100%;
        }
      }
    }

    &[aria-expanded='true'] {
      .rectTop {
        rotate: 45deg;

        x: 0%;
        y: 50%;
      }

      .rectCenter {
        @mixin hide;
      }

      .rectBottom {
        rotate: -45deg;

        x: 0;
        y: 50%;
      }
    }
  }

  .NavLink {
    display: inline-block;

    padding: 15px var(--links-inline-padding);

    font-family: var(--copperplate-cc);
    font-size: clamp(rem(18px), pxToVw(22, $layoutWidth) + 0.1rem, rem(22px));
    font-weight: 700;
    text-transform: uppercase;

    transition: all 0.2s ease;

    &:hover,
    &:focus-visible {
      background: #d3b387;
    }
  }

  .Input {
    font-size: 20px;
    background: var(--black-coffe);

    &::placeholder {
      font-family: var(--poppins-italic);
      opacity: 0.5;
    }
  }

  .Button {
    padding: 15px 40px;
    font-family: var(--opti-copperplate);
    text-transform: uppercase;
    transition: all 0.2s ease;
  }

  .OrangeHr {
    width: clamp(3em, 8em, 8em);
    height: 5px;
    background: var(--third-coffee);

    &._small {
      width: 54px;
    }

    &._vertical {
      width: 5px;
      height: 100%;
    }

    &._fromRight {
      position: absolute;
      top: 0;
      right: 0;
    }

    &._big-line-toleft {
      @media (width > 1024px) {
        z-index: 1;
        translate: -50%;
        width: 30em;
      }
    }
  }

  .BigRef {
    display: grid;
    gap: 10px;
    place-content: center center;
    place-items: center center;

    padding: clamp(20px, pxToVw(75, $layoutWidth), 75px);

    color: var(--black-coffee);

    background: var(--second-coffee);
    border: 1px solid var(--second-coffee);

    transition: all 0.2s ease;

    &:hover,
    &:focus-visible {
      color: var(--coffee-text-color);
      background: var(--third-coffee);

      path {
        fill: var(--first-coffee);
      }
    }
  }

  .RowWithBigRefs {
    display: grid;

    @container (width >= 1024px) {
      grid-template-columns: repeat(4, 1fr);

      > *:not(:last-child) {
        border-right: 2px solid var(--gray-color);
      }
    }

    @container (width < 1024px) {
      grid-template-columns: repeat(2, 1fr);

      > * {
        border: 1px solid var(--gray-color);
      }
    }
  }

  burger-menu {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .Logo {
    /* Не позволяет сжиматься в flex-контейнере. */
    flex: 0 0 auto;
  }

  .Advantage {
    @mixin grid {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
      gap: 1em 25px;
    }

    padding: clamp(25px, pxToVw(50, $layoutWidth), 50px) 0;

    img {
      grid-row: span 2;
    }
  }

  .GridWithThreeBlocks {
    display: grid;
    grid-template:
      'left top-right' auto
      'left bottom-right' auto
      / 0.9fr 1.1fr;
    align-items: start;

    > *:not(._left) {
      display: grid;
      align-content: center;

      height: 100%;
      padding: clamp(30px, pxToVw(100, $layoutWidth), 100px);
      padding-right: 0;
    }

    ._left {
      grid-area: left;
      height: 100%;
    }

    ._top-right {
      grid-area: top-right;
    }

    ._bottom-right {
      grid-area: bottom-right;
    }

    @media (width <= 1150px) {
      grid-template-columns: 0.5fr 1.5fr;
    }

    @media (width <= 768px) {
      grid-template:
        'top-right' auto
        'left' 300px
        'bottom-right' auto
        / 1fr;
    }
  }

  .Article {
    display: grid;
    gap: 10px;

    a {
      font-size: clamp(18px, pxToVw(26, $layoutWidth), 26px);
      font-weight: 600;
      line-height: 158%;
    }
  }

  .BigArticle {
    contain: paint;
    display: grid;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    a {
      font-size: clamp(20px, pxToVw(30px, $layoutWidth), 30px);
      font-weight: 500;
      line-height: 137%;
    }

    big-article-main {
      padding: clamp(15px, pxToVw(35, $layoutWidth), 35px);
    }
  }

  article-column {
    --gap-between-blocks: clamp(25px, pxToVw(40, $layoutWidth), 40px);

    display: inline-grid;
    gap: var(--gap-between-blocks);
    align-content: start;

    > :not(:last-child) {
      &::after {
        content: '';

        display: block;

        height: 3px;

        /* Необходимо делить, поскольку line-height текста сверху создаёт отступ с низу. */
        margin-top: calc(var(--gap-between-blocks) / 3);

        line-height: 0;

        background: var(--third-coffee);
      }
    }
  }

  .BigAdvantagesBlock {
    display: grid;
    grid-template-rows: auto auto;
    gap: clamp(40px, pxToVw(120, $layoutWidth), 120px);

    top-block {
      @mixin flex {
        flex-flow: row wrap;
        gap: 20px 50px;
        align-items: center;
        justify-content: space-between;
      }
    }

    bottom-block {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: clamp(35px, pxToVw(96, $layoutWidth), 96px)
        clamp(45px, pxToVw(65, $layoutWidth), 65px);

      advantages-block-big {
        grid-row: span 2;
        align-self: start;

        @media (1024px < width <= 1440px) {
          grid-column: span 2;
          grid-row: span 1;
        }
      }

      @media (width <= 1440px) {
        grid-template-columns: 1fr 1fr;
      }

      @media (width <= 1024px) {
        grid-template-columns: 1fr;
        width: max(50vw, 400px);
        margin: auto;
      }

      @media (width <= 600px) {
        width: auto;
        margin: unset;
      }
    }
  }

  advantages-block-big {
    display: grid;
    gap: clamp(15px, pxToVw(30, $layoutWidth), 30px);

    mark {
      --decor-square-margin: 0.3em;

      position: relative;

      margin-left: var(--decor-square-margin);

      font-family: var(--copperplate-cc);
      font-size: clamp(80px, pxToVw(126, $layoutWidth), 126px);
      font-weight: 700;

      &::before {
        content: '';

        position: absolute;
        z-index: -1;
        top: -15%;
        left: calc(var(--decor-square-margin) * -1);

        display: inline-block;

        width: 1.1em;
        height: 1.1em;

        background: var(--third-coffee);
      }
    }

    p {
      font-size: clamp(24px, pxToVw(28, $layoutWidth), 28px);
      font-weight: 600;
      line-height: 1.3;
    }
  }

  advantages-block {
    display: grid;
    grid-template:
      'decor title' auto
      'decor text' auto
      / 90px 1fr;
    gap: 10px 40px;

    image-block {
      position: relative;
      grid-area: decor;
      align-self: start;

      &::before {
        content: '';

        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 100%;

        background: var(--third-coffee);
      }

      img {
        translate: -30% 30%;
      }
    }

    mark {
      grid-area: title;
      font-size: clamp(18px, pxToVw(28, $layoutWidth), 28px);
      font-weight: 600;
      line-height: 1.3;
    }

    p {
      grid-area: text;
    }

    @media (--is-mobile) {
      gap: 20px;

      image-block {
        text-align: center;

        img {
          translate: 0% 30%;
        }
      }
    }
  }

  .TitleBlockWithLeftHr {
    display: grid;
    grid-template:
      'hr itemOne' auto
      'hr itemTwo' auto
      / auto 1fr;
    gap: 15px 4em;

    hr {
      grid-area: hr;
    }

    :nth-child(1) {
      grid-area: itemOne;
    }

    :nth-child(2) {
      grid-area: itemTwo;
    }
  }

  .ProductArticle {
    container-type: inline-size;
    display: grid;
    gap: 35px;

    padding: 30px;

    background: #fff;

    a {
      contain: paint;
      text-align: center;

      img {
        aspect-ratio: 1/1;
        width: 318px;
        object-fit: contain;
        transition: scale 0.2s ease;
      }

      &:hover,
      &:focus-visible {
        img {
          scale: 1.2;
        }
      }
    }

    product-main {
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      gap: 10px;

      @container (width <= 250px) {
        grid-template-columns: 1fr;
      }

      mark {
        font-size: rem(24px);
        font-weight: 600;
      }

      price-block {
        font-size: clamp(
          rem(20px),
          pxToVw(30, $layoutWidth) + 0.1rem,
          rem(30px)
        );
        font-weight: 600;
        font-style: italic;
        color: var(--third-coffee);

        @container (width >= 250px) {
          justify-self: end;
        }
      }

      small {
        font-weight: 600;
        color: #a7a19e;
      }
    }

    button {
      margin-top: 20px;
      text-align: center;
    }
  }

  products-block {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }

  .CustomersBlock {
    position: relative;

    container-type: inline-size;
    display: grid;
    grid-template:
      'preview title' auto
      'preview photo' 1fr
      'preview photo' 1fr
      'preview blockquote' auto
      'buttons blockquote' 150px
      / minmax(0, 1fr) minmax(0, 1fr);
    gap: 35px;

    > * {
      display: block;
    }

    title-block {
      grid-area: title;
    }

    customer-photo {
      grid-area: photo;

      swiper-slider {
        height: 100%;
      }
    }

    customer-preview {
      grid-area: preview;

      swiper-slider {
        height: 100%;
      }
    }

    #customers-blockquotes {
      grid-area: blockquote;
      width: 100%;

      blockquote {
        display: block;
      }
    }

    buttons-block {
      display: flex;
      grid-area: buttons;
      gap: 15px;
      place-self: end end;
      align-items: center;

      > * {
        transition: all 0.2s ease;

        &.inactive {
          opacity: 0.4;
        }

        &:hover:not(.inactive),
        &:focus-visible:not(.inactive) {
          scale: 1.1;
        }
      }
    }

    @media (width <= 1024px) {
      grid-template:
        'title title' auto
        'preview photo' auto
        'preview photo' auto
        'preview buttons' auto
        'blockquote blockquote' auto
        'blockquote blockquote' auto
        / minmax(0, 1fr) minmax(0, 1fr);

      title-block {
        justify-items: center;
        text-align: center;
      }
    }

    @media (width <= 768px) {
      grid-template:
        'title title' auto
        'photo photo' 100px
        'photo photo' 100px
        'buttons buttons' auto
        'blockquote blockquote' auto
        'blockquote blockquote' auto
        / 1fr 1fr;
      gap: 15px;

      customer-preview {
        position: absolute;

        overflow: hidden;

        width: 1px;
        height: 1px;

        white-space: nowrap;

        clip-path: inset(50%);
      }
    }
  }

  @keyframes hero-bg-animation {
    from {
      translate: 0 -35%;
    }

    to {
      translate: 0 0%;
    }
  }

  @keyframes to-top-op0-1 {
    from {
      translate: 0 50px;
      opacity: 0.2;
    }

    to {
      translate: 0 0;
      opacity: 1;
    }
  }

  #second-block {
    > * :is(svg, span) {
      @media (prefers-reduced-motion: no-preference) {
        animation: to-top-op0-1 linear forwards;

        animation-range: cover 0% cover 40%;
        animation-timeline: view();

        @media (--is-mobile) {
          animation-range: cover 0% cover 20%;
        }
      }
    }
  }

  #hero img {
    @media (prefers-reduced-motion: no-preference) {
      scale: 1 1.35;
      animation: hero-bg-animation linear forwards;

      animation-range: cover 0%;
      animation-timeline: view();
    }
  }

  .Advantages {
    > article {
      @media (prefers-reduced-motion: no-preference) {
        animation: to-top-op0-1 linear forwards;

        animation-range: cover 0% cover 40%;
        animation-timeline: view();
      }
    }
  }

  .BigAdvantagesBlock advantages-block {
    @media (prefers-reduced-motion: no-preference) {
      animation: to-top-op0-1 linear forwards;

      animation-range: cover 0% cover 30%;
      animation-timeline: view();
    }
  }
}
